import React, { Component } from 'react';
import { Row, Col, Slider, InputNumber } from 'antd';

export default class SliderInput extends Component {
  constructor() {
    super();
  }
  onChange = value => {
    this.props.onChange && this.props.onChange(value);
  };
  onChangeInput = value => {
    this.props.onChange && this.props.onChange(value / 100);
  };
  render() {
    const { value } = this.props;
    return (
      <Row type='flex' {...this.props}>
        <Col span={12}>
          <Slider
            min={0.01}
            max={1}
            step={0.01}
            onChange={this.onChange}
            value={typeof value === 'number' ? value : 0}
          />
        </Col>
        <Col span={12}>
          <InputNumber
            min={0}
            max={100}
            value={value * 100}
            formatter={value => `${value}%`}
            parser={value => value.replace('%', '')}
            style={{ marginLeft: 16 }}
            onChange={this.onChangeInput}
          />
        </Col>
      </Row>
    );
  }
}
